﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box Background</title>

<style>
body {
  font-family: Verdana;
  font-size: 15px;
}

.decoratedBox {
  min-width: 320px;
  height: 270px;
  border: 1px solid gray;
  margin: 20px;

  background: transparent;
  background-image: url('top-left.png'), url('bottom-right.png');
  background-position: left top, right bottom;
  background-repeat: no-repeat, no-repeat;
}

.decoratedBox p {
  margin: 50px;
  color: rgb(255,104,0);
  font-weight: bold;
}

</style>
</head>

<body>

<div class="decoratedBox">
  <p>This box combines two background images, which are positioned in its
 top-left and bottom-right corners.
  </p>
  <p>You can see the difference when you resize the page.</p>
</div>

</body>
</html>
